<template>
  <div>
    <!--一，v-show ：控制css样式 相当于“display:none”-->

    <div v-show="flag">这是一个盒子</div>

    <!-- 二，v-if:动态创建 删除元素节点-->
    <div v-if="flag">我也是一个盒子</div>
    <br />
    <br />
    <br />

    <!-- 三，图片隐藏案例 -->
    <img
      src="../public/v2-3fa7a99836c453eef6284c9927bc3b33_720w.webp"
      alt=""
      v-show="flag"
    />
    <button @click="hide">点一点</button>
    <br />
    <br />
    <br />

    <!-- 四，v-if判断案例 -->
    <div v-if="age >= 60">60岁以上，唱跳rap</div>
    <div v-else-if="age >= 30">30岁以上，抽烟喝酒烫头</div>
    <div v-else-if="age >= 20">20岁以上，煮茶焚香下棋</div>
    <div v-else>20岁以下，练习广场舞</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      age: 68,
    }
  },

  methods: {
    hide() {
      this.flag = !this.flag
    },
  },
}
</script>

<style scoped></style>
